<template>
	<view class="">
	<!-- 	<navigator class="input" url="/pages/search/search">
		    <u-search placeholder="请输入关键词搜索" disabled :show-action="false" bg-color="rgba(0,187,120,0.04)" height="72"></u-search>
		</navigator> -->
		<view class="input">
			<u-search placeholder="请输入关键词搜索" :show-action="true" bg-color=" rgba(255,255,255,0.1)" v-model="searchtext" @custom="customFn"></u-search>
		</view>
		<view class="list-class">
			<block v-for="(item, newsIndex) in dataList" :key="newsIndex">
			  <navigator :url="`/pages/user/mycaiguo?id=${item.id}&userId=${item.user_id}`">
			      <view class="news-card flex bg-white1 px-[20rpx] py-[32rpx]">
			          <view class="mr-[20rpx]" v-if="item.fming">
			              <u-image :src="item.fming" width="220" height="200"></u-image>
			          </view>
			  		<view style="width: 65%;">
			  			<view class="card-titel">
							<view class="card-titel-name">
								{{ item.name }}
							</view>
							<view class="card-titel-shenhe" v-if="item.start==0">
								审核中
							</view>
						</view>
			  			<view class="gui">
			  				<view class="gui-item">
			  					规格：
			  				</view>
			  				<view class="huanhang">
			  					{{item.specifications}}
			  				</view>
			  			</view>
			  			<view class="gui">
			  				<view class="gui-item1">
			  					交货地：
			  				</view>
			  				<view class="huanhang">
			  					{{item.producer}}
			  				</view>
			  			</view>
			  			<view class="phone">
			  				<view class="">
			  					联系方式：
			  				</view>
			  				<view class="">
			  					{{item.contacts[0].tel}}
			  				</view>
			  			</view>
			          </view>
			      </view>
			  </navigator>
			</block>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue'
	import { getArticleCate,getcaigouList } from '@/api/news'
	import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
	// onLoad((options) => {
	//     // getData()
	// 	queryList()
	// })
	onShow(()=>{
		queryList()
	})
	const searchtext=ref('')
	const dataList=ref([])
	const queryList = async () => {
	    try {
	        let data = await getcaigouList()
			data.forEach(item=>{
				item.contacts=JSON.parse(item.contacts)
			})
			console.log(data,'lists1111111111111111111');
	        // paging.value.complete(lists)
			dataList.value=data
	    } catch (e) {
	        console.log('报错=>', e)
	        //TODO handle the exception
	        // paging.value.complete(false)
	    }
	}
	const customFn=async()=>{
		// console.log('搜索');
		// console.log(searchtext.value,'searchtext');
		try {
		    let data = await getcaigouList({
		      name:searchtext.value
		    })
			// console.log(lists,'lists1111111111111111111');
		    // paging.value.complete(lists)
			dataList.value=data
			dataList.value.forEach(item=>{
				item.contacts=JSON.parse(item.contacts)
			})
			dataList.value.forEach(item=>{
				if(item.contacts.length!=0){
					item.contacts[0].tel=mobile(item.contacts[0].tel)
				}
				// item.contacts[0].tel=mobile(item.contacts[0].tel)
				// console.log(item);
			})
			
		} catch (e) {
		    console.log('报错=>', e)
		}
	}
</script>

<style scoped lang="scss">
	.gui-item1{
		width:23%;
	}
	.gui-item{
		width: 17%;
	}
	.news-card{
		margin-bottom: 20rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.huanhang{
		flex: 1;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.input{
		// position: absolute;
		// top: 204rpx;
		margin-top: 28rpx;
		margin-bottom: 28rpx;
		width: 94%;
		margin-left: 3%;
		background-color: rgba(0,187,120,0.04);
	// height: 72rpx;
	border: 3rpx solid #06BE7C;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.list-class{
		width: 94%;
		margin-left: 3%;
	}
	.card-titel{
	
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		.card-titel-name{
			width: 75%;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.card-titel-shenhe{
			flex: 1;
			text-align: right;
			color: #cc463d;
			
		}
	}
	.gui{
		display: flex;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #777777;
		margin-top: 22rpx;
	}
	.phone{
		margin-top: 22rpx;
		display: flex;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.bg-white1{
		background-color: #fff;
	}
	.news-card-top{
		display: flex;
		height: 56rpx;
		line-height: 56rpx;
		padding-bottom: 16rpx;
		box-sizing: content-box;
		border-bottom: 2rpx solid #EEE;
		position: relative;
		.tou{
			width: 56rpx;
			height: 56rpx;
		}
		.zhiding1{
			position: absolute;
			right: -18rpx;
			bottom:0;
			.zhiding{
				width: 134rpx;
				height: 52rpx;
			}
		}
		
	}
	.news-card-conter{
		margin-top: 16rpx;
	}
	.news-card-bottom{
		margin-top: 16rpx;
		background: #F8F8F8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #AAAAAA;
		line-height: 36rpx;
		padding: 20rpx;
	}
	// .news-card {
	//     // border-bottom: 1px solid #f8f8f8;
	// 	margin-bottom: 20rpx;
		
	// border-radius: 16rpx 16rpx 16rpx 16rpx;
	//     &-content {
	//         &-title {
	//             -webkit-line-clamp: 2;
	//             overflow: hidden;
	//             word-break: break-all;
	//             text-overflow: ellipsis;
	//             display: -webkit-box;
	//             -webkit-box-orient: vertical;
	//         }
	//         &-intro {
	//             -webkit-line-clamp: 1;
	//             overflow: hidden;
	//             word-break: break-all;
	//             text-overflow: ellipsis;
	//             display: -webkit-box;
	//             -webkit-box-orient: vertical;
	//         }
	//     }
	// }
	// .card-titel{
	// 	white-space: nowrap;
	// 	text-overflow: ellipsis;
	// 	overflow: hidden;
	// 	font-size: 28rpx;
	// 	font-family: PingFang SC, PingFang SC;
	// 	font-weight: 500;
	// 	color: #333333;
	// }
	// .gui{
	// 	display: flex;
	// 	// width: 422rpx;
	// 	font-size: 24rpx;
	// 	font-family: PingFang SC, PingFang SC;
	// 	font-weight: 400;
	// 	color: #777777;
	// 	margin-top: 22rpx;
		
	// }
	// .gui-item{
	// 	width: 17%;
	// }
	// .huanhang{
	// 	flex: 1;
	// 	white-space: nowrap;
	// 	text-overflow: ellipsis;
	// 	overflow: hidden;
	// }
	// .phone{
	// 	margin-top: 22rpx;
	// 	display: flex;
	// 	font-size: 24rpx;
	// 	font-family: PingFang SC, PingFang SC;
	// 	font-weight: 400;
	// 	color: #333333;
	// }
	// .bg-white1{
	// 	background-color: #fff;
	// }
</style>